<template>
  <!-- 唱片夹 -->
  <div class="m-recordDir" v-title :data-title="$t('router.recordTitle')">
    <el-button
      class="creatBtn"
      @click="openDialog('createFile')"
      type="primary"
      v-text="$t('public.create')"
    >
    </el-button>
    <ul
      class="dirList"
      :loading="loading"
      v-loading="fullscreenLoading"
      v-infinite-scroll="load"
      infinite-scroll-disabled="isPage"
      infinite-scroll-delay="120"
      infinite-scroll-distance="10"
      infinite-scroll-immediate="false"
    >
      <li v-for="item of fileList" @click="fileToggle(item)" :key="item.dirId">
        <p :title="item.name" v-text="item.name"></p>
        <span>({{ item.nums }})</span>
      </li>
    </ul>
    <nice-empty
      v-show="fileList.length == 0 && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
    <div class="page-wrap" v-show="isPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-size="params.pageSize"
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        :total="total"
        small
      >
      </el-pagination>
    </div>

    <!--弹窗界面-->
    <el-dialog
      width="20%"
      :title="$t(textMap[dialogStatus])"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 创建唱片夹 -->
      <el-form
        v-if="this.dialogStatus == 'createFile'"
        :model="createFile"
        class="createFile"
        :rules="rules"
        ref="createFile"
      >
        <el-form-item :label="$t('public.recordHolderName')" prop="name">
          <el-input
            class="input-new-tag"
            v-model="createFile.name"
            @keyup.enter.native="createData(dialogStatus)"
            :placeholder="$t('main.enterRecordClipName')"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="clearBtn" @click.native="dialogFormVisible = false">{{
          $t("public.cancel")
        }}</el-button>
        <el-button type="primary" @click="createData(dialogStatus)">{{
          $t("public.save")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import drawerList from "@/components/common/drawerList/Index";
export default {
  data() {
    return {
      fileList: [], //文件夹
      fullscreenLoading: true,
      // 是否显示加载动画
      loading: false,
      // el-dialog相关
      textMap: {
        // 添加与编辑界面
        createFile: "public.addRecordHolder", //this.$t('public.edit')
      },
      options: [], //单曲夹下拉
      dialogFormVisible: false, //弹窗
      dialogStatus: "", //编辑框界面切换
      createFile: {
        name: "",
        type: 1, //类型:1.唱片夹,2.单曲夹
      },
      params: {
        type: 1,
        // 1.唱片夹,2.单曲夹
        pageSize: 30,
        // 当前页数
        pageNum: 1,
        // code: "",
      },
      isPage: false, //显示加载更多或分页
      total: 0, //总条数
    };
  },
  components: {
    // drawerList,
  },
  computed: {
    rules() {
      return {
        select: [
          {
            required: true,
            message: this.$t("public.selectDisks"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("public.disksCannotEmpty"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getSongSheetDir();
  },
  methods: {
    //文件夹切换
    fileToggle(val) {
      this.$router.push({
        name: "mMyMusicRecordDirDetail",
        params: {
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          id: val.dirId + "",
        },
      });
    },
    //分页 每页条数
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getSongSheetDir();
    },
    //当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getSongSheetDir();
    },
    //获取文件夹
    async getSongSheetDir() {
      this.fullscreenLoading = true;
      try {
        let res = await this.$api.user.getDirList(this.params);
        if (res.code === 1000000) {
          this.fileList = res.source ? res.source : [];
          this.fullscreenLoading = false;
          if (res.size < 50 && res.size < res.total) {
            this.loading = true;
            this.isPage = false;
          } else {
            this.loading = false;
            this.isPage = true;
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 打开弹窗界面
    async openDialog(type) {
      if (!this.$store.getters.loginStatu) {
        this.$notify.error({
          title: this.$t("public.sorry"),
          message: this.$t("public.loginPermission"),
          duration: 3000,
        });
        return;
      }
      this.dialogStatus = type;
      if (type == "createFile") {
        this.dialogFormVisible = true;
      }
      this.$nextTick(() => {
        this.$refs[type].resetFields();
      });
    },
    //弹窗 提交按钮
    createData(type) {
      this.$refs[type].validate(async (valid) => {
        if (valid) {
          if (type === "createFile") {
            if (this.createFile.name.trim() === "") {
              this.$message({
                showClose: true,
                type: "error",
                message: this.$t("public.addRecordHolderEmpty"),
                duration: 1000,
              });
              return false;
            }
            let res = await this.$api.user.addDir(this[type]);
            if (res.code === 1000000) {
              this.getSongSheetDir();
              this.$message({
                showClose: true,
                message: this.$t("public.addSuccess"),
                type: "success",
                duration: 1000,
              });
              this.dialogFormVisible = false;
            } else if (res.code === 1700401) {
              this.$message({
                showClose: true,
                message: this.$t("public.recordExists"),
                type: "error",
                duration: 1000,
              });
            }
          }
        }
      });
    },
    load() {
      this.params.pageSize += 20;
      this.getSongSheetDir();
    },
  },
};
</script>

<style lang="scss" scoped>
.m-recordDir {
  > .creatBtn {
    width: 100%;
    height: 39px;
    line-height: 100%;
    border-radius: 2px;
    font-size: 17px;
  }
  > .dirList {
    li {
      display: flex;
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      margin: 18px 0;
      > span {
        padding-left: 5px;
      }
      &.fileActive {
        color: #a1322c;
      }
    }
  }
}
</style>
